<template>
  <div class="bbq-switch"
       :class="{'is-open':modelValue,'round':round}"
       @click.prevent="switchTrigger"
  >
  </div>
</template>

<script lang="ts">
export default {
  name: "bbq-switch",
  props:{
    modelValue: {
      type:Boolean,
      default:false
    },
    round: Boolean
  },
  //update :modelValue 加上这个固定值:modelValue 就可以写v-model的时候省略后面的属性申明了
  emits: ['update:modelValue','handleChange'],
  setup(props,ctx){
    const switchTrigger = ()=>{
      //传递过去的值去一个反  父组件 <bbq-switch v-model:isOpen="defineVal"></bbq-switch>
      ctx.emit("update:modelValue",!props.modelValue)
      //返回的默认值代表的是响应后的状态
      ctx.emit("handleChange",!props.isOpen)

    }
    return {
      switchTrigger
    }
  }
}
</script>